<template>
  <view class='list acea-row row-between-wrapper' :data-theme="theme">
    <view class='item' hover-class='none' @click="goDetail(item)">
      <view class='pictrue'>
        <easy-loadimage mode="widthFix" :image-src="item.image"></easy-loadimage>
        <view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }"
              class="border-picture"></view>
        <view class="course-type-tag" :class="(item.productValue['默认'].type | item.type) === 0 ? 'offline' : 'online'">
          <image class="type-icon" :src="(item.productValue['默认'].type | item.type) === 0 ? IMAGE_CONFIG.xianXia : IMAGE_CONFIG.xianShang"></image>
          <text class="type-text">{{ (item.productValue['默认'].type | item.type) === 0 ? '线下课' : '线上课' }}</text>
        </view>
      </view>
      <view class='texts'>
        <view class='names box-line2'>
          <text v-if="item.productTags && item.productTags.locationLeftTitle.length"
                class="font-bg-red mr10 bg-color merType">{{ item.productTags.locationLeftTitle[0].tagName }}
          </text>
          {{ item.name }}
        </view>
        <view class='money mt-10'>

          <view class="price-sales-box">
            <svip-price :svipIconStyle="svipIconStyle"
                        :productPrice="item"
                        :svipPriceStyle="svipPriceStyle"></svip-price>

            <view v-if="item.productTags && item.productTags.locationUnderTitle.length">
              <text
                  v-for="items in item.productTags.locationUnderTitle.length>3?item.productTags.locationUnderTitle.slice(0,3):item.productTags.locationUnderTitle"
                  :key="items.id" class="mr10 tagSolid">{{ items.tagName }}
              </text>
            </view>

            <view class="sold mt-8 sales">
              <!--            已售 {{ item.sales }} {{ item.unitName }}-->
              {{ item.sales }}人学过
            </view>
          </view>
        </view>
        <!--        <view class="company mt-4" v-if="item.merName" @click.stop="goStore(item.merId)">-->
        <!--          <text class='name line1'>{{ item.merName }}</text>-->
        <!--          <view class="flex">-->
        <!--            进店-->
        <!--            <text class="iconfont icon-xiangyou"></text>-->
        <!--          </view>-->
        <!--        </view>-->
      </view>
    </view>
  </view>
</template>

<script>
// import {
//   goProductDetail
// } from '@/libs/order.js'
import easyLoadimage from '@/components/base/easy-loadimage.vue';
import svipPrice from '@/components/svipPrice.vue';
import {IMAGE_CONFIG} from '@/utils/imageConfig'

import {toLogin} from "@/libs/login.js";
import {mapGetters} from "vuex";

let app = getApp();
export default {
  components: {
    easyLoadimage,
    svipPrice
  },
  props: {
    item: {
      type: Object,
      require: true
    },
    type: {
      type: Number,
      default: 0
    },
    isStore: {
      type: [String, Number],
      default: '1'
    },
    // isLogin: {
    //   type: Boolean,
    //   require: false
    // }
  },
  computed: {
    ...mapGetters(["isLogin"]),
  },
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.index,
      theme: app.globalData.theme,
      //普通价格
      svipPriceStyle: {
        svipBox: {
          height: '26rpx',
          borderRadius: '60rpx 56rpx 56rpx 20rpx',
        },
        icon: {
          height: '26rpx',
          fontSize: '18rpx',
          borderRadius: '12rpx 0 12rpx 2rpx'
        },
        price: {
          fontSize: '38rpx'
        },
        svipPrice: {
          fontSize: '22rpx'
        }
      },
      //svip价格
      svipIconStyle: {
        svipBox: {
          height: '26rpx',
          borderRadius: '24rpx 40rpx 40rpx 0.4rpx',
        },
        price: {
          fontSize: '38rpx'
        },
        svipPrice: {
          fontSize: '18rpx'
        }
      }
    }
  },
  methods: {
    // 去详情页
    goDetail(item) {
      // goProductDetail(item.id, 0, '');
      console.log(11)
      console.log(this.isLogin)
      if (this.isLogin === false) {
        toLogin();
      } else {
        uni.navigateTo({
          url: '/pages/discover/courseDetails/index?id=' + item.id
        })
      }
    },
    goStore(id) {
      uni.navigateTo({
        url: `/pages/merchant/home/index?merId=${id}`
      })
    },
    authOpen() {
      this.$emit('authOpen');
    },
    followToggle(item) {
      this.$emit('followToggle', item);
    }
  }
}
</script>
<style lang="scss" scoped>
.tagSolid {
  margin-bottom: 4rpx;
}

.merType {
  @include main_bg_color(theme);
}

.list {
  background: #F6F2EA;
  border-radius: 10px;
  .item {
    width: 100%;

    .pictrue {
      position: relative;
      height:200rpx;
      /* 课程类型标签样式 */
      .course-type-tag {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        //border-radius: 20rpx;
        color: #fff;
        font-size: 22rpx;
        font-weight: 500;
        z-index: 3 !important;

        &.offline {
          background: linear-gradient(135deg, #b3793b, #b3793b);
        }

        &.online {
          background: linear-gradient(135deg, #8e4c38, #8e4c38);
        }

        .type-icon {
          margin-right: 10rpx !important;
          width: 20rpx;
          height: 20rpx;
        }

        .type-text {
          font-size: 22rpx;
          font-weight: 500;
        }
      }
      ::v-deep image,
      ::v-deep .easy-loadimage,
      uni-image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
      }
    }

  }

  .texts {
    padding: 16rpx;
    font-size: 30rpx;
    color: #222;
    background-color: #F6F2EA;
    border-radius: 0 0 16rpx 16rpx;

    .names {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .money {
      width: 100rpx;

      .num {
        font-size: 38rpx;
        font-weight: 900;
        @include price_color(theme);
      }

      .y-money {
        font-size: 26rpx;
        color: #888888;
        text-decoration: line-through;
        margin-left: 14rpx;
      }
    }
  }
}

.company {
  display: flex;
  align-items: center;
  font-size: 26rpx;

  .name {
    width: 210rpx;
    display: inline-block;
    color: #666 !important;
    height: auto !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 0 !important;
    margin-right: 10rpx;
  }

  .flex {
    display: flex;
    align-items: center;
    color: #282828 !important;

    .iconfont {
      font-size: 16rpx;
      margin-top: 4rpx;
    }
  }
}

.sold {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.m-l-8 {
  margin-left: 8rpx;
}

.list .item .pictrue,
.easy-loadimage,
image,
uni-image {
  position: relative;
  width: 100%;
  /*height: 330rpx;*/
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;

  ::v-deep .easy-loadimage,
  uni-image,
  image {
    height: 330rpx;
    border-radius: 16rpx 16rpx 0 0;
  }

  margin: 0 !important;
}

.box-line2 {
  overflow: hidden;
  /*
  height: 80rpx;
  */
  display: -webkit-box; /* 必须设置 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 2; /* 限制行数 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.sales {
  font-size: 20rpx;
  color: #A28C72;
  background: #FFFFFF;
  text-align: center;
  border-radius: 100rpx;
  padding: 5rpx 20rpx;
  min-width: 100rpx !important;
}

.price-sales-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  width: 317rpx;
}
</style>